
<template>
  <div class="address-box">
    <s-header :name="'地址管理'" :back="state.from == 'create-order' ? '' : '/user'"></s-header>
    <div class="address-item">
      <van-address-list
        v-if="state.from != 'mine'"
        v-model="state.chosenAddressId"
        :list="state.list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        @select="select"
      />
      <van-address-list
        v-else
        v-model="state.chosenAddressId"
        :list="state.list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
    </div>
  </div>
</template>

<script setup>
import sHeader from '@/components/SimpleHeader.vue'
import { onMounted, reactive } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { getAddressList } from '@/service/address'
const route = useRoute()
const router = useRouter()
const state = reactive({
    list:[],
    from:route?.query?.from ?? ''
})
onMounted(()=>{
    init()
})
const init = async ()=>{
    const {data } = await getAddressList()
    if(!data) {
        state.list = []
        return
    }
    console.log(data);
    state.list = data.map(item=>{
        return {
            id: item.addressId,
            name: item.userName,
            tel: item.userPhone,
            address: `${item.provinceName} ${item.cityName} ${item.regionName} ${item.detailAddress}`,
            isDefault: item.defaultFlag
        }
    })
}
// 添加地址
const onAdd = ()=>{
    router.push({path:'address-edit',query:{ type: 'add', from: state.from}})
}
// 修改地址
const onEdit = (item)=>{
    router.push({path:'address-edit',query:{ type: 'edit', addressId:item.id, from: state.from}})
}
// 选中后，返回订单生成页面
const select = ()=>{
    router.push({path:'create-order',query:{ addressId:item.id, from: state.from}})
}
</script>

<style lang="less">
  @import '../common/style/mixin';
  .address-box {
    .van-radio__icon {
      display: none;
    }
    .address-item {
      .van-button {
        background: @primary;
        border-color: @primary;
      }
    }
  }
</style>
